<template>
  <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" append-to-body width="500px">
    <el-form class="deleteInfo" ref="deleteInfo" :inline="true" :model="deleteInfo.data" :rules="deleteInfo.rules"
             size="small"
             label-width="100px">
      <el-form-item label="状态" prop="status">
        <el-select v-model="deleteInfo.data.status" placeholder="请选择离职状态" style="width: 240px">
          <el-option label="请选择" value=""></el-option>
          <el-option label="在职" :value="'0'"></el-option>
          <el-option label="待离职" :value="'1'"></el-option>
          <el-option label="离职" :value="'20'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="`${deleteInfo.data.status}` !== '0'" label="离职日期" prop="leaveDate">
        <el-date-picker
          v-model="deleteInfo.data.leaveDate"
          type="date"
          placeholder="离职日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="handleDeleteSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { debounce } from 'lodash'
  import { formatDate, formatTimestamp } from '@/utils/utils'
  import { deleteRecordAPI } from '@/api/employee/record'

  export default {
    name: 'RecordDelete',
    mixins: [],
    components: {},
    data() {
      return {
        dialog: {
          visible: false, // 是否显示
          title: '状态设置'
        },
        formParams: { // 编辑需要的参数
          status: '', // 离职状态
          leaveDate: ''  // 离职时间
        },
        deleteInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            status: [
              { required: true, message: '请选择离职状态', trigger: 'change' }
            ],
            leaveDate: [
              { required: true, message: '请选择离职时间', trigger: 'change' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      }
    },
    computed: {},
    methods: {
      handleDeleteSubmit: debounce(function() { // 离职，提交，防抖
        this.$refs['deleteInfo'].validate((valid) => {
          if (valid) {
            let { detailData } = this
            this.$confirm(`是否确认修改员工:${detailData.name}的状态?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.deleteRecordData()
            }).catch(() => {
            })
          }
        })
      }, 300),
      async deleteRecordData() { // 离职-数据请求
        try {
          let { status, leaveDate } = this.deleteInfo.data
          
          if(status == '0'){
          	leaveDate = null;
          }
          
          let response = await deleteRecordAPI({
            id: this.detailData.id,
            //添加离职状态和离职日期
            status,
            leaveDate
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$emit('on-init', this.searchKey)
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '离职失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '离职失败!'
          })
        }
      },
      async resetDeleteData(data = null) { // 重置编辑表单
        this.dialog.title = '状态设置'
        // this.dialog.visible = true
        this.deleteInfo.id = undefined
        this.deleteInfo.disabled = false
        this.deleteInfo.data = {
          ...this.formParams
        }
        if (data) { // 离职
          // this.deleteInfo.id = data.uuid
          this.deleteInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            if (item === 'leaveDate') {
              this.deleteInfo.data[item] = formatDate(formatTimestamp(data[item]), 'yyyy-MM-dd') === '1971-01-01' ? '' : data[item]
            } else {
              this.deleteInfo.data[item] = data[item]
            }
          })
          this.deleteInfo.disabled = true
        }
      },
      async initDeleteDialog(data = null) { // 编辑－显示弹出框
        await this.resetDeleteData(data)
        this.$nextTick(() => {
          this.$refs['deleteInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initDeleteDialog(this.detailData)
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .deleteInfo {
    margin-right: 0;

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 98px;
    display: none;
  }

</style>
